<template>
	<view class="content">

		<!-- 排序筛选 -->
		<view v-if="type != 3" class="filter_div">
			<view :class=" flt_type == 0 ? 'filter_txt_sel' :'filter_txt'" @click="onFilterClick(0)">综合排序</view>
			<!-- 其他筛选条件 -->
			<view style="display: flex;align-items: center;justify-content: center;">
				<view :class=" flt_type == 1 ? 'filter_txt_sel' :'filter_txt'" @click="onFilterClick(1)">
					距离<view class="sjx">▲</view>
				</view>
				<view :class=" flt_type == 2 ? 'filter_txt_sel' :'filter_txt'" @click="onFilterClick(2)">
					评分<view class="sjx">▼</view>
				</view>
				<!-- <view :class=" flt_type == 3 ? 'filter_txt_sel' :'filter_txt'" @click="onFilterClick(3)">
					销量<view class="sjx">▼</view>
				</view> -->
			</view>
		</view>

		<!-- 顶部占位空间 -->
		<view style="width: 100rpx;height: 80rpx;"></view>

		<view v-for="(item,index) in data_list" class="item_div" @click.stop="onItemClick(item)">
			<!-- 图片 名称 线路 电话 -->
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<!-- 图片 名称 线路 -->
				<view style="display: flex;">
					<!-- 图片 -->
					<image style="width: 130rpx;height: 130rpx;" src="/static/ic_fwl.png"></image>
					<!-- 名称 线路 -->
					<view style="display: flex;flex-direction: column;">
						<view style="margin: 4rpx 0 0 16rpx;font-size: 28rpx;font-weight: bold;">{{item.company_name}}</view>
						<view style="margin: 4rpx 0 0 16rpx;font-size: 26rpx;">{{ item.trace[0] ? item.trace[0].line_name : '暂无线路信息' }}</view>
						<view style="margin: 4rpx 0 0 16rpx;font-size: 24rpx;color: #666;display: flex;align-items: center;">
							<view v-if="!item.score || item.score < 60" style="color: orange;margin: 0 12rpx 0 0;">评价★</view>
							<view v-if="item.score >= 60 && item.score < 70" style="color: orange;margin: 0 12rpx 0 0;">评价★★★</view>
							<view v-if="item.score >= 70 && item.score < 90" style="color: orange;margin: 0 12rpx 0 0;">评价★★★★</view>
							<view v-if="item.score >= 90" style="color: orange;margin: 0 12rpx 0 0;">评价★★★★★</view>
							<view v-if="item.is_audit == 1" style="color: orange;margin: 0 12rpx 0 0;">已认证✔</view>
							<view v-else style="color: #999;margin: 0 12rpx 0 0;">未认证✖</view>
							<view>距离{{(item.trace[0] && item.trace[0].site[0]) ? item.trace[0].site[0].distance : '9999.99'}}km</view>
						</view>
					</view>
				</view>
				<!-- 电话 -->
				<view style="display: flex;flex-direction: column;">
					<image style="width: 44rpx;height: 44rpx;" src="/static/ic_phone.png" @click.stop="onPhone(item)"></image>
					<image style="width: 44rpx;height: 44rpx;margin: 16rpx 0 0 0;" src="/static/ic_navigate.png" @click.stop="onNavigate(item)"></image>
				</view>

			</view>
			<!-- 发站 到站 -->
			<view style="display: flex;flex-direction: column;margin: 16rpx 0 0 0;">
				<view style="display: flex;align-items: center;">
					<view class="tag">发站</view>
					<view class="tag_txt">{{ (item.trace[0] && item.trace[0].site[0]) ? item.trace[0].site[0].address : '暂无站点信息' }}</view>
				</view>
				<view style="display: flex;align-items: center;margin: 8rpx 0 0 0;">
					<view class="tag">到站</view>
					<view class="tag_txt">{{ (item.trace[0] && item.trace[0].unloadsite[0]) ? item.trace[0].unloadsite[0].address : '暂无站点信息' }}</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="!data_list || data_list.length <= 0" style="width: 100vw;height: 100vh;background-color: white;text-align: center;line-height: 40vh;">暂无数据~</view>

	</view>
</template>

<script>
	import { getUInfo, timestampToYMDHM, getStatusTxt, getDistance } from '@/util/util.js'
	import { getLocation, openLocation } from '@/util/uni_util.js'
	export default {
		data() {
			return {

				type: '', // 传过来的查询类型 1 发站到站 2 物流公司 3 运单
				from: '', // 传过来的发站
				to: '', // 传过来的到站
				logistics_name: '', // 传过来的物流公司名称
				park_id: '', // 传过来的物流园区id

				flt_type: '0', // 顶部的筛选条件

				data_list: [],

				page: 1,
				page_size: 20,

				lat: 0, // 记录当前的纬度
				lon: 0, // 记录当前的经度

			}
		},

		onLoad(opts) {
			this.lat = uni.getStorageSync('location_lat')
			this.lon = uni.getStorageSync('location_lon')
			// this.getLocationInfo()

			// 1 发站到站 2 物流名称 3 运单 4 物流园区
			this.type = opts.type
			if (this.type == 1) {
				this.from = opts.from
				this.to = opts.to
				uni.setNavigationBarTitle({ title: `${opts.from}→${opts.to}` })
				this.getSiteList()
			} else if (this.type == 2) {
				this.logistics_name = opts.com
				uni.setNavigationBarTitle({ title: `"${opts.com}"相关物流` })
				this.getLogList()
			} else if (this.type == 3) {
				uni.setNavigationBarTitle({ title: `"${opts.order}"相关订单` })
			} else if (this.type == 4) { // 园区跳转过来
				uni.setNavigationBarTitle({ title: `${opts.name}-物流公司` })
				this.park_id = opts.park_id
				this.getLogList()
			}
		},

		mounted() {
			// 测试计算距离
			let dis = getDistance(35, 118, 36, 119)
			console.log('距离 = ', dis);
		},

		methods: {

			// 获取位置信息
			getLocationInfo() {

			},

			// 点击切换筛选条件
			onFilterClick(type) {
				this.flt_type = type
				if (type == 0) {
					this.page = 1
					this.data_list = []
					this.reqNewData()
				} else if (type == 1) {
					if (this.type == 1 || this.type == 2 || this.type == 4) {
						this.sortByDistance()
					}
				} else if (type == 2) {

				}
			},

			// 点击item
			onItemClick(item) {
				// console.log(`item = `, item);
				uni.navigateTo({ url: `/pages/logcom/logcom_detail?id=${item.id}&name=${item.company_name}` })
			},

			// 打开导航
			onNavigate(item) {
				console.log('item = ', item);
				if (!item.latitude || !item.longitude) {
					uni.showToast({ icon: 'none', title: '位置有误，导航失败' })
					return
				}
				openLocation(parseFloat(item.latitude), parseFloat(item.longitude))
			},

			// 拨打电话
			onPhone(item) {
				if (!item || !item.servicephone) {
					uni.showToast({ icon: 'none', title: '未录入号码' })
					return
				}
				uni.makePhoneCall({ phoneNumber: `${item.queryphone}` })
			},

			// 通用:筛选排序条件/下拉刷新/到底加载更多 都使用这个函数方法
			reqNewData() {
				if (this.type == 1) {
					this.getSiteList()
				} else if (this.type == 2 || this.type == 4) {
					this.getLogList()
				}
			},

			// 下拉刷新
			onPullDownRefresh() {
				this.flt_type = 0
				this.page = 1
				this.data_list = []
				this.reqNewData()
			},

			// 到达底部
			onReachBottom() {
				this.page++
				this.reqNewData()
			},

			// 接口:根据物流公司名称查询 
			async getLogList() {
				let that = this
				let token = getUInfo().token
				let logistics_name = this.logistics_name
				uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getLogList({ page: this.page, page_size: this.page_size, logistics_name, park_id: this.park_id })
				if (res.code == 1) {
					if (!res.data.data || res.data.data.length <= 0) {
						uni.showToast({ icon: 'none', title: '暂无更多数据' })
						return
					}
					this.data_list = this.data_list.concat(res.data.data)
					this.calcDistance()
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:根发站到站查询查询
			async getSiteList() {
				let that = this
				let token = getUInfo().token
				let site_name = this.from
				let unload_name = this.to
				uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getSiteList({ page: this.page, page_size: this.page_size, site_name, unload_name })
				if (res.code == 1) {
					if (!res.data.data || res.data.data.length <= 0) {
						uni.showToast({ icon: 'none', title: '暂无更多数据' })
						return
					}
					this.data_list = this.data_list.concat(res.data.data)
					this.calcDistance()
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 处理:计算距离
			async calcDistance() {
				let that = this
				this.data_list = this.data_list.map((item, index) => {
					let trace = item.trace
					trace && trace.map((item2, index2) => {
						let site = item2.site
						site && site.map((item3, index3) => {
							if (!item3.latitude || !item3.longitude) { // 网点的经纬度不存在
								item3.distance = 9999.99
							} else {
								item3.distance = getDistance(that.lat, that.lon, item3.latitude, item3.longitude)
							}
							return item3
						})
						return item2
					})
					return item
				})
			},

			// 处理:对网点 线路 物流公司进行排序
			async sortByDistance() {
				let that = this
				// 对网点进行排序
				this.data_list = this.data_list.map((item, index) => {
					let trace = item.trace
					trace && trace.map((item2, index2) => {
						let site = item2.site
						site && site.sort((a, b) => {
							try {
								return a.distance - b.distance
							} catch (error) {
								return 0
							}
							return 0
						})
						return item2
					})
					return item
				})
				// 对线路进行排序
				this.data_list = this.data_list.map((item, index) => {
					let trace = item.trace
					trace && trace.sort((a, b) => {
						try {
							return a.site[0].distance - b.site[0].distance
						} catch (error) {
							return 0
						}
						return 0
					})
					return item
				})
				// 对物流公司进行排序
				this.data_list.sort((a, b) => {
					try {
						return a.trace[0].site[0].distance - b.trace[0].site[0].distance
					} catch (error) {
						return 0
					}
					return 0
				})

				uni.showToast({ icon: 'none', title: '已按距离排序' })

			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.filter_div {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 48rpx);
		margin: 0 24rpx 0 24rpx;
		height: 80rpx;
		font-size: 28rpx;
		background: #F8F8F8;
		z-index: 1;
	}

	.filter_txt {
		display: flex;
		align-items: center;
		padding: 12rpx;
	}

	.filter_txt_sel {
		display: flex;
		align-items: center;
		padding: 12rpx;
		color: orangered;
	}

	.sjx {
		font-size: 16rpx;
		margin: 0 0 0 4rpx;
	}

	.item_div {
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.tag {
		border: #CB8450 solid 1rpx;
		color: #CB8450;
		font-size: 20rpx;
		padding: 0rpx 6rpx;
		border-radius: 8rpx;
	}

	.tag_txt {
		font-size: 24rpx;
		/* 防止文本换行 */
		white-space: nowrap;
		/* 隐藏溢出的内容 */
		overflow: hidden;
		/* 显示省略符号来代表被修剪的文本 */
		text-overflow: ellipsis;
		max-width: 85%;
		margin: 0 0 0 8rpx;
	}
</style>